<%@ page import="com.biz.primus.base.enums.ExtendType" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<primus:page title="扩展属性列表">
    <jsp:attribute name="css">
        <style type="text/css">

        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $('#plus').on('click', function () {
                    var currentOptionIndex = $('.extend-option').size();
                    console.log("当前option 指针" + currentOptionIndex);
                    $('#optionGroup').append('                                <div class="form-group extend-option col-sm-12">\n' +
                        '                                    <label class="col-sm-3 control-label no-padding-right">\n' +
                        '                                        属性值\n' +
                        '                                    </label>\n' +
                        '                                    <div class="col-sm-2">\n' +
                        '                                        <input type="text" name="options[' + currentOptionIndex + '].value"\n' +
                        '                                               value="${option.value}">\n' +
                        '                                    </div>\n' +
                        '                                    <label class="col-sm-3 control-label no-padding-right">\n' +
                        '                                        排序\n' +
                        '                                    </label>\n' +
                        '                                    <div class="col-sm-2">\n' +
                        '                                        <input type="number" name="options[' + currentOptionIndex + '].idx" value="${option.idx}">\n' +
                        '                                    </div>\n' +
                        '                                </div>');
                });
            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <%--<jsp:include page="../demo/cats/component/navigations.jsp"/>--%>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    商品管理
                </li>
                <li class="active">
                    扩展属性管理
                </li>
            </ul>
            <a class="btn btn-xs btn-primary history-back">
                <i class="ace-icon fa fa-angle-left"></i>
                返回
            </a>
        </div>

        <div class="page-content">
            <h3 class="header smaller lighter blue">
                扩展属性数据
            </h3>
            <div class="row">
                <div class="col-xs-12">
                    <form action="management/extend/save" method="post" class="form-horizontal" role="form">
                        <input type="hidden" name="id" value="${extend.id}">
                        <input type="hidden" name="categoryId" value="${extend.categoryId}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="key">
                                扩展属性唯一标识（用来区分不同分类下相同名称的扩展属性）
                            </label>
                            <div class="col-sm-9">
                                <input id="key" type="text" name="key" readonly="readonly"
                                       placeholder="唯一标识"
                                       maxlength="255" minlength="1"
                                       value='<c:out value="${extend.key}"/>'
                                       class="required text col-xs-12 col-sm-12">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="label">
                                扩展属性名
                            </label>
                            <div class="col-sm-9">
                                <input id="label" type="text" name="label" readonly="readonly"
                                       placeholder="label"
                                       maxlength="10" minlength="1"
                                       value='<c:out value="${extend.label}"/>'
                                       class="required text col-xs-12 col-sm-12">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="idx">
                                排序
                            </label>

                            <div class="col-sm-9">
                                <input id="idx" type="number" name="idx"
                                       value='<c:out value="${extend.idx}"/>'
                                       class="required text col-xs-12 col-sm-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">
                                扩展属性类型
                            </label>
                            <c:set var="inputEnum" value="<%=ExtendType.INPUT %>"/>
                            <c:set var="optionEnum" value="<%=ExtendType.OPTION %>"/>
                            <div class="col-sm-4">
                                <c:choose>
                                    <c:when test="${extend.extendType == inputEnum}">
                                        <input type="radio" name="extendType" value="INPUT" checked="checked">手动输入
                                        &nbsp;&nbsp;<input type="radio" name="extendType" value="OPTION">选项
                                    </c:when>
                                    <c:when test="${extend.extendType == optionEnum}">
                                        <input type="radio" name="extendType" value="INPUT">手动输入
                                        &nbsp;&nbsp;<input type="radio" checked="checked" name="extendType" value="OPTION">选项
                                    </c:when>
                                </c:choose>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">
                                点击加号添加扩展属性值
                            </label>
                            <div class="row">
                                <i class="fa fa-plus" id="plus"></i>
                            </div>
                        </div>
                        <div id="optionGroup">
                            <c:forEach items="${extend.options}" varStatus="status" var="option">
                                <div class="form-group extend-option col-sm-12">
                                    <label class="col-sm-3 control-label no-padding-right">
                                        属性值
                                    </label>
                                    <div class="col-sm-2">
                                        <input type="text" name="options[${status.index}].value"
                                               value="${option.value}">
                                    </div>
                                    <label class="col-sm-3 control-label no-padding-right">
                                        排序
                                    </label>
                                    <div class="col-sm-2">
                                        <input type="number" name="options[${status.index}].idx" value="${option.idx}">
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                        <%--<sec:authorize access="hasAuthority('OPT_EXTEND_UPDATE')">--%>
                            <div class="row"></div>
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button class="btn btn-info" type="submit" id="btn_save">
                                        <i class="ace-icon fa fa-check bigger-110"></i>
                                        保存
                                    </button>

                                    &nbsp; &nbsp; &nbsp;
                                    <button class="btn" type="reset">
                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        <%--</sec:authorize>--%>
                    </form>
                </div>
            </div>
        </div>
    </jsp:body>
</primus:page>
